<template>
  <div>
     
    <div class="scroll"  v-if="goods[pops]">
       <!-- <div>{{goods[pops][0].list}}</div> -->
      <div v-for="(item, index) in goods[pops][0].list" :key="index" class="scrollItem" @click="scrollClick(index,pops,goods)">
        <img :src="item.imgs" @load="imgLoad"/>
        <div class="scrollSpan">
          <span>{{item.price}}</span>
          <span>{{item.prices}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    
     index:0,
     listLength:0
      
    };
  },
  props:{
            pops:{
                type:String
            },
            goods:{
              type:Object,
              default(){
                return{}
              }
            }
            // isTrue:{
            //   type:Number,
            //   default:NaN
            // }
        },
  // created(){
  //     if(this.isTrue){
  //       this.listadd()
  //     }
  // },
  methods:{
    scrollClick(index,pops,good){
      // console.log(index)
      // console.log(pops)
      this.$router.push('/details/'+pops+"/"+index);
      // this.$bus.$emit('shoppingGood',good)
      
  
    //  this.$bus.$emit('details')
    },
    imgLoad(){
      this.$bus.$emit('imgLoad')
    },

    //流行 新款 精选 数据展示
    listadd(){
      
     
     
      this.listLength=this.goods[this.pops].length;
      // console.log(...this.goods[this.pops][this.index].list)
       this.index=this.$store.state.index
      //  console.log(this.$store.state.index)
      //  console.log(this.index)
     //&&this.listLength>=2
      if(this.index<this.listLength){
        this.goods[this.pops][0].list.push(...this.goods[this.pops][this.index].list)
       }
      
    }
  }
  //  methods:{
           
  //   classNmae(){

  //       //锚点
  //       // return document.getElementsByClassName('scrollItem')[0].id="nameSpan";
        
  //      }
  //   },
       
  // mounted(){
  //           this.classNmae()
  //       }
};
</script>

<style>
    .scroll {
      display: flex;
      flex-wrap: wrap;
    }
    .scrollItem {

      flex: 1;
      margin: 10px 10px;
    }
    .scrollItem img {
      width: 150px;
      vertical-align: middle;
    }
    .scrollSpan {
      margin-top: 4px;
      text-align: center;
    }
    .scrollSpan :nth-child(2) {
      text-decoration-line: line-through;
      margin-left: 12px;
      color: #f00;
    }
</style>